15. CSS Filters

I. Blur

Explanation: blur() filter image ya element ko dhundla banane ke liye use hota hai.

Note: use image link to see exact effect

<style> .blur { filter: blur(5px); } </style> <img class="blur" src="image.jpg" alt="Blurred Image"> Run Code

II. Brightness

Explanation: brightness() filter element ki brightness ko adjust karta hai. Value 0 se 1.5 tak hoti hai.

<style> .brightness { filter: brightness(1.5); } </style> <img class="brightness" src="image.jpg" alt="Bright Image"> Run Code

III. Contrast

Explanation: contrast() filter element ki contrast ko badhane ya kam karne ke liye use hota hai.

<style> .contrast { filter: contrast(2); } </style> <img class="contrast" src="image.jpg" alt="High Contrast Image"> Run Code

IV. Grayscale

Explanation: grayscale() filter element ko black-and-white banata hai.

<style> .grayscale { filter: grayscale(100%); } </style> <img class="grayscale" src="image.jpg" alt="Grayscale Image"> Run Code

V. Sepia

Explanation: sepia() filter element ko purani ya vintage look dene ke liye use hota hai.

<style> .sepia { filter: sepia(100%); } </style> <img class="sepia" src="image.jpg" alt="Sepia Image"> Run Code

VI. Hue-rotate

Explanation: hue-rotate() filter element ke colors ko rotate (shift) karta hai.

<style> .hue-rotate { filter: hue-rotate(90deg); } </style> <img class="hue-rotate" src="image.jpg" alt="Hue-Rotated Image"> Run Code

VII. Invert

Explanation: invert() filter element ke colors ko reverse (invert) karta hai.

<style> .invert { filter: invert(100%); } </style> <img class="invert" src="image.jpg" alt="Inverted Image"> Run Code

VIII. Drop-shadow

Explanation: drop-shadow() filter element ke neeche shadow add karta hai.

<style> .drop-shadow { filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.3)); } </style> <img class="drop-shadow" src="image.jpg" alt="Image with Drop Shadow"> Run Code